<template>
  <div class="market">
    <header>
      <span class="logo">
        <img src="../img/2.gif" alt />
      </span>
      <span>楼市圈</span>
      <span class="return" @click="back()">
        <van-icon name="arrow-left" />
      </span>
    </header>
    <div class="mar_menu">
      <p id="add">
        <van-icon name="plus" />
      </p>
      <dl v-for="(item,idx) in list" :key="idx">
        <dt>
          <img :src="item.head" alt />
          <p>{{item.name}}</p>
        </dt>
        <dd>
          <p>{{item.tit}}</p>
          <img :src="item.url" alt />
          <br />
          <span>{{item.time}}</span>
          <p>删除</p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import axios from "../../ulis/request";
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios({
        url: "/api/circleList"
      }).then(res => {
        if (res.data.code === 1) {
          this.list = res.data.data;
        } else {
          this.$router.push(`/login`);
        }
      });
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script> 

<style>
.market {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.live header {
  width: 100%;
  height: 60px;
  background-color: #2997fb;
  text-align: center;
  line-height: 60px;
}

.live header span {
  color: white;
  float: right;
  margin-right: 80px;
  /* vertical-align: middle; */
  font-size: 18px;
}

.live header .logo {
  float: right;
  margin-right: 10px;
}

.live header .return {
  float: left;
  margin-left: 30px;
  vertical-align: middle;
  margin-top: 3px;
}
.mar_menu {
  flex: 1;
  overflow-y: auto;
  position: relative;
}
#add {
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #1180f4;
  position: fixed;
  top: 80%;
  left: 70%;
}
#add .van-icon {
  color: #fff;
  padding-left: 24px;
  line-height: 80px;
  font-size: 30px;
}
.mar_menu dl {
  width: 98%;
  height: 380px;
  margin-left: 5px;
  border-bottom: 1px solid rgb(233, 233, 233);
}
.mar_menu dl dt {
  display: flex;
}
.mar_menu dl dt p {
  padding-top: 24px;
  padding-left: 5px;
  font-weight: bold;
  font-size: 16px;
}
.mar_menu dl dt img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 20px;
  margin-top: 20px;
}

/* .mar_menu dl dd{
  width: 100%;
  height: 200px;
  margin-left: 100px;
} */
.mar_menu dl dd img {
  width: 280px;
  height: 200px;
  margin-left: 12%;
}
.mar_menu dl dd p {
  padding-top: 5px;
  padding-left: 50px;
  font-size: 16px;
}
.mar_menu dl dd span {
  font-size: 16px;
  padding-left: 49%;
  padding-top: 5px;
  display: inline-block;
}
.mar_menu dl dd p:nth-of-type(2) {
  padding-left: 80%;
}
</style>